<template>
	<view>
		<view class="login-form">
			<input type="text" class="input-row" v-model="account" maxlength="11" placeholder="请输入帐号...">
			<input type="password" class="input-row" v-model="password" placeholder="请输入密码...">
			<button type="bytton" class="btn login-btn" @click="login">登录</button>
			<view class="bot flex-box">
				<navigator class="sign" hover-class="none" url="">立即注册</navigator>
				<navigator class="forget" hover-class="none" url="">忘记密码</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import { apiLogin } from "@/apis/index.js"
	import {mapState,mapMutations} from "vuex"
	export default {
		data() {
			return {
				account:'',
				password:''
			}
		},
		computed:{
			
		},
		onLoad() {
			
		},
		methods: {
			...mapMutations(['storeLogin']),
			login(){   //登录接口
			let self = this
				if(!this.account||!this.password){  //帐号或密码为空就提示
					uni.showModal({
						content:"帐号或密码不能为空！",
						title:"提示！",
						showCancel:false
					})
				}else if(this.password.length<6 || this.password.length>16){ 					// 检查密码长度
						uni.showModal({
							content:"密码长度为6-16位！",
							title:"提示！",
							showCancel:false
						})
				}else{
					uni.showLoading({
						title:"登录中..."
					})
					// 调用登录接口
					let params = {
						userName:this.account,
						password:this.password
					}
					apiLogin(params).then(res=>{   //登录接口
						// if(res.data.code!=200){  //登录失败
							
						// }
						// // 登录成功   保存数据并跳转首页
						// const temp = {
						// 	token:res.data.account.token,
						// 	profile:res.data.profile
						// }
						// // 保存到vuex
						// this.storeLogin(temp)
						// // 跳转
						// uni.switchTab({
						// 	url:"/pages/index/index"
						// })
					})
					
					// 由于登录接口不可用，所以下面几行是写死数据模仿是登录接口获取----------------
					let obj={
						token:1613631016037,
						userName:'天天哥'
					}
					// 保存到vuex
					//vuex刷新会清空数据，放在浏览器缓存，刷新就从app.vue中拿出来重新放到vuex
					uni.setStorageSync("userInfo",JSON.stringify(obj))
					this.storeLogin(obj)
					// 如果不在methods用...mapMutations(['storeLogin']),映射可以用下行方法-------------------
					// this.$store.commit('storeLogin',obj)
					uni.switchTab({
						url:"/pages/index/index"
					})
					setTimeout(function () {
						uni.hideLoading();
					}, 500);
				}
			}
		}
	}
</script>

<style lang="scss">
.input-row {
	width: 600rpx;
	height: 75rpx;
	margin: 0 auto;
	border: 1px solid #E04B28;
	color: #6c6c6c;
	border-radius: 75rpx;
	padding: 0 50rpx;
	line-height: 75rpx;
	margin-bottom: 45rpx;
	font-size: 26rpx;
}

.login-form {
	padding-top: 220rpx;
}
.login-btn {
	width: 600rpx;
	height: 75rpx;
	margin: 0 auto;
	border: 1px solid #E04B28;
	border-radius: 75rpx;
	padding: 0 50rpx;
	line-height: 75rpx;
	margin-bottom: 45rpx;
	font-size: 26rpx;
	color: #fff;
	background: #E04B28;
}
.bot {
	width: 600rpx;
	padding: 0 17rpx;
	font-size: 26rpx;
	margin: 0 auto;
	justify-content: space-between;
}
.sign {
	color: #E04B28;
}
.auth-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	position: absolute;
	bottom: 100rpx;
	left: 0;
	width: 100%;
	.auth-image {
		width: 50px;
		height: 50px;
		border: 1px solid #dddddd;
		border-radius: 50px;
		margin: 0 20px;
		background-color: #ffffff;
		overflow:hidden;
	}
	.img {
		width: 30px;
		height: 30px;
		margin: 10px;
	}
	input{
		outline:none;
		border:none;
		list-style: none;
	}
}
.log-btn{
	margin:0;
	padding:0;
	background: #fff!important;
	height:48px;
	&::after{
		background-color:transparent;
		margin:0;
		padding:0;
		border:0;
	}
}
</style>
